<template>
    <div class="rightmain_container">
        <!-- 筛选搜索 -->
        <div class="search_box">
            <el-row>
                <el-col :span="21" class="left_search">
                    <el-icon :size="20" color="#444545">
                        <Search />
                    </el-icon>
                    <span>筛选搜索</span>
                </el-col>
                <el-col :span="3" class="right_search">
                    <el-button type="primary" @click="fetch">查询结果</el-button>
                </el-col>
            </el-row>
            <el-row class="input_search">
                <span>输入搜索：</span>
                <el-input autocomplete="false" placeholder="品牌名称/关键字" @keyup.enter="fetch" v-model="searchParams.keyword" />
            </el-row>
        </div>
        <!-- 数据列表 -->
        <div class="oprations_box">
            <div class="left_search">
                <el-icon :size="20" color="#444545">
                    <Tickets />
                </el-icon>
                <span>数据列表</span>
            </div>
            <div class="right_btn">
                <el-button type="primary" @click="router.push('/pms/addBrand')">
                    添加
                </el-button>
            </div>
        </div>
        <!-- 品牌列表 -->
        <el-table ref="multipleTableRef" :data="list" style="width: 100%" @selection-change="handleSelectionChange"
            :cell-style="{ textAlign: 'center' }" :header-cell-style="{ textAlign: 'center', height: '50px' }" border>
            <el-table-column type="selection" width="55" />
            <el-table-column label="编号" width="100">
                <template #default="scope">{{ scope.row.id }}</template>
            </el-table-column>
            <el-table-column property="name" label="品牌名称" width="675" />
            <el-table-column property="firstLetter" label="品牌首字母" width="100" show-overflow-tooltip />
            <el-table-column property="sort" label="排序" width="100" show-overflow-tooltip />
            <el-table-column label="品牌制造商" width="100">
                <template #default="{ row }">
                    <el-switch v-model="row.factoryStatus" :active-value="1" :inactive-value="0"
                        @change="switchChange(row)"></el-switch>
                </template>

            </el-table-column>
            <el-table-column label="是否显示" width="100">
                <template #default="{ row }">
                    <el-switch v-model="row.showStatus" :active-value="1" :inactive-value="0"
                        @change="switchChange2(row)"></el-switch>
                </template>
            </el-table-column>
            <el-table-column label="相关" width="200">
                <template #default>
                    <span>商品：</span>
                    <el-button type="primary" link>
                        100
                    </el-button>
                    <span>评价：</span>
                    <el-button type="primary" link>
                        1000
                    </el-button>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="200">
                <template #default="{ row }">
                    <el-button @click="router.push('/pms/updateBrand?id=' + row.id)">编辑</el-button>
                    <el-button type="danger" @click="delBrand(row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 左侧下拉操作 -->
        <div class="select_hand">
            <el-select v-model="formInline.showStatus" placeholder="批量操作">
                <el-option label="显示品牌" value="1" />
                <el-option label="隐藏品牌" value="0" />
            </el-select>
            <el-button type="primary" @click="showStatus">确定</el-button>
        </div>
        <!-- 分页 -->
        <PaginationTwo v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[10, 20, 50, 100]"
            :total="total" />
    </div>
</template>
<script setup lang='ts'>
import { Search } from '@element-plus/icons-vue'
import { ApiGetBrandList, ApiUpdateBrandShowStatus, ApiUpdateBrandFactoryStatus, ApiDelBrand } from '@/http/api'
import { reactive, ref } from 'vue';
import useTable from '@/hooks/useTable';
import PaginationTwo from '@/components/Pagination/PaginationTwo.vue'
import { useRouter } from 'vue-router';
// @ts-ignore
import { ElMessage, ElMessageBox } from 'element-plus'

const router = useRouter();

// 品牌名称关键字
const searchParams = reactive({
    // 27.37因为 searchParams 是很多的到时候会，所以需要定义成对象
    keyword: ''
})

const formInline = reactive<IUpdateBrandShowStatusParams>({
    ids: [],
    showStatus: ''
})

// 品牌列表数据
const multipleSelection = ref<IBrandListAllModel[]>([])
const handleSelectionChange = (val: IBrandListAllModel[]) => {
    multipleSelection.value = val
    formInline.ids = val.map(item => {
        return item.id
    })
}

// 按钮更新厂家制造商状态
const switchChange = (brand: ICreateBrandParams) => {
    ApiUpdateBrandFactoryStatus({
        ids: brand.id,
        factoryStatus: brand.factoryStatus
    }).then(res => {
        if (res.code === 200) {
            ElMessage({
                type: 'success',
                message: '修改成功'
            })
        } else {
            brand.factoryStatus = brand.factoryStatus === 1 ? 0 : 1
        }
    })
}
// 按钮更新品牌显示状态
const switchChange2 = (brand: ICreateBrandParams) => {
    ApiUpdateBrandShowStatus({
        ids: brand.id as any as number[],
        showStatus: brand.showStatus as any as string
    }).then(res => {
        if (res.code === 200) {
            ElMessage({
                type: 'success',
                message: '修改成功'
            })
        } else {
            brand.factoryStatus = brand.factoryStatus === 1 ? 0 : 1
        }
    })
}

// 批量更新品牌显示状态
const showStatus = () => {
    if (formInline.ids.length == 0) {
        ElMessage({
            type: 'warning',
            message: '请选择一条记录'
        })
        return;
    }
    if (formInline.showStatus == '') {
        ElMessage({
            type: 'warning',
            message: '请选择批量操作类型'
        })
        return;
    }
    ApiUpdateBrandShowStatus(formInline).then(res => {
        if (res.code === 200) {
            ElMessage({
                type: 'success',
                message: '修改成功'
            })
        }
        fetch()
    })
}

// 删除品牌
const delBrand = (id: number) => {
    ElMessageBox.confirm('是否要删除该品牌', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
    }).then(() => {
        ApiDelBrand(id).then(res => {
            if (res.code === 200) {
                ElMessage({
                    type: 'success',
                    message: '删除成功'
                })
                fetch()
            }

        })

    }).catch(() => { })

}

const { list, pageNum, pageSize, total, fetch } = useTable(ApiGetBrandList, searchParams)
</script>
<style lang="less" scoped>
.rightmain_container {
    .search_box {
        padding: 20px;
        box-shadow: 0 0 4px 2px #eee;
        margin-bottom: 20px;
        border-radius: 2px;
        // 二十四、将搜索框部分粘性定位到顶部
        position: sticky;
        top: -20px;
        z-index: 2;
        background-color: rgba(255, 255, 255, 0.9);

        // 右边按钮
        .right_search {
            display: flex;
            align-items: center;
            justify-content: right;
        }

        .input_search {
            display: flex;
            align-items: center;

            span {
                font-size: 14px;
                color: #606266;
                margin-left: 30px;
            }

            .el-input {
                width: 200px;
            }
        }
    }

    .oprations_box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px;
        box-shadow: 0 0 4px 2px #eee;
        margin-bottom: 20px;
        border-radius: 2px;
    }

    .select_hand {
        margin-top: 20px;
        float: left;

        .el-button {
            margin-left: 20px;
        }
    }
}
</style>